<template>
	<view class="shopList">
		<view class="screen">
			<view class="search">
				<u-search placeholder="请输入关键字搜索" v-model='keyword' bgColor='#F6F6F6' :showAction='false' :clearabled='true' @change='initShopList(1)'></u-search>
			</view>
			<view class="screenCondition dFlex jAround_aCenter">
				<view :class="['conditionOne',orderby == 'normal'?'actScreen':'']" @click="orderby = 'normal';initShopList(1)">
					<text>综合推荐</text>
					<view class="bottomLine imgPublic">
						<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
					</view>
				</view>
				<view :class="['conditionOne',orderby == 'salenum'?'actScreen':'']" @click="orderby = 'salenum';initShopList(1)">
					<text>销量</text>
					<view class="bottomLine imgPublic">
						<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
					</view>
				</view>
				<view :class="['conditionOne',orderby == 'createtime'?'actScreen':'']" @click="orderby = 'createtime';initShopList(1)">
					<text>新品推荐</text>
					<view class="bottomLine imgPublic">
						<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="list dFlex jBetween_aStart fWap" v-if="list.length">
			<view class="shopOne" v-for="(item,index) in list" :key='index' @click="goPage(1,0,item.id)">
				<view class="shopImg imgPublic dFlex jCenter_aCenter">
					<image :src="item.main_img" mode="widthFix"></image>
				</view>
				<view class="shopInfo">
					<view class="shopName">{{item.title}}</view>
					<view class="intro">{{item.description?item.description:'暂无相关介绍'}}</view>
					<view class="config dFlex jBetween_aCenter">
						<view class="showPrice">
							<view class="price dFlex jStart_aCenter">
								<view class="newPrice">¥{{item.price?item.price:'0.00'}}</view>
								<view class="oldPrice">¥{{item.old_price?item.old_price:'0.00'}}</view>
							</view>
							<view class="sale">已售：{{item.salenum?item.salenum:0}}</view>
						</view>
						<view class="carIcon imgPublic">
							<image src="../static/images/hgwc@3x.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无数据'></u-empty>
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
	import {
		getGoodsList
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				id:'',
				list:[],
				load:true,
				page:1,
				size:10,
				orderby:'normal',// normal综合排序 salenum销量 createtime创建时间
				keyword:'',
			};
		},
		onLoad(e){
			this.id = e.id;
		},
		onShow(){
			this.initShopList();
		},
		onReachBottom(){
			if(this.load){
				this.load = false;
				this.page ++ ;
				this.initShopList();
			}
		},
		methods:{
			// 商品列表
			async initShopList(page){
				this.page = page ? page : this.page;
				let res = await getGoodsList({
					tid:this.id?this.id:'',
					keyword:this.keyword,
					page:this.page,
					pageSize:this.size,
					orderby:this.orderby,
					ordertype:'desc',
				});
				if(res){
					this.list = this.page == '1' ? res : this.list.concat(res);
					this.load = res.length >= this.size ? true : false;
				}
			},
			// 页面跳转
			goPage(idx,status = 0,config){
				if(status){
					
				}
				if(idx == '1'){ //商品详情
					uni.navigateTo({
						url:'./shopDetail?id='+config
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.screen{
		width: 100%;
		background: white;
		padding: 12px 2.6% 6px;
		box-sizing: border-box;
	}
	.list{
		width: 100%;
		padding: 12px 2.6%;
		box-sizing: border-box;
		.shopOne{
			width: 48%;
			border-radius: 4px;
			// box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
			margin-bottom: 12px;
			background:white;
			.shopInfo{
				width: 100%;
				padding: 8px 8px 15px;
				box-sizing: border-box;
				.config{
					width: 100%;
					.showPrice{
						flex: 1;
						.price{
							width: 100%;
							.newPrice{
								color: rgb(277, 37, 37);
								font-size: 15px;
								font-weight: bold;
							}
							.oldPrice{
								color:#808080;
								font-size: 12px;
								margin-left: 8px;
								text-decoration: line-through;
							}
						}
						.sale{
							font-size: 12px;
							margin-top: 3px;
							color:#808080;
						}
					}
					.carIcon{
						width: 25px;
						margin-left: 12px;
					}
				}
				.intro{
					width: 100%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 12px;
					margin:4px 0 6px;
					color: #808080;
				}
				.shopName{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: bold;
				}
			}
			.shopImg{
				width: 100%;
				height: 45.5vw;
				border-radius: 5px;
				overflow: hidden;
				overflow: hidden;
			}
		}
	}
</style>
